import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Picker } from '@react-native-picker/picker';
import Events from './event';
import { size } from '@/app/utils';

interface Country {
    value: string;
    label: string;
}

interface ModalOptions {
    options?: Country[];
    selectedValue?: string;
    callback?: (result: Country) => void;
}
let PickerModal = () => {
    let insets = useSafeAreaInsets();
    let [modalVisible, setModalVisible] = useState(false);
    let [modalOptions, setModalOptions] = useState<ModalOptions>({});
    const [pickerValue, setPickerValue] = useState<string>('');
    let [countries, setCountries] = useState<Country[]>([]);

    useEffect(() => {
        Events.addListener("openPicker", _modal)
    }, [])

    const _modal = (options: ModalOptions) => {
        setModalVisible(true);
        setModalOptions(options);
        setCountries(options.options || []);
        setPickerValue(options.selectedValue || '');
    }

    const _sure = () => {
        setModalVisible(false);
        setModalOptions({});
        const selectedCountry = countries.find(item => item.value === pickerValue);
        if (selectedCountry && modalOptions.callback) {
            modalOptions.callback(selectedCountry);
        }
    }

    const handleChange = (value: string) => {
        setPickerValue(value)
    };

    return (
        modalVisible ? <Pressable style={styles.modalbox} onPress={() => {
            setModalVisible(false);
            setModalOptions({});
        }}>
            <Pressable onPress={(e) => e.stopPropagation()} style={{width:'100%'}}>
                <View style={[styles.content, { paddingBottom: insets.bottom ? size(insets.bottom) : size(20) }]}>
                    <View style={styles.modalheaderbox}>
                        <Pressable onPress={() => {
                            setModalVisible(false);
                            setModalOptions({});
                        }}>
                            <Text style={styles.modalheadercanceltitle}>取消</Text>
                        </Pressable>
                        <View style={{ paddingLeft: size(30), paddingRight: size(30) }}>
                            <Text numberOfLines={1} style={styles.modalheadertitle}>选择国际</Text>
                        </View>
                        <Pressable onPress={() => {
                            _sure()
                        }}>
                            <Text style={styles.modalheadersuretitle}>确认</Text>
                        </Pressable>
                    </View>
                    <View>
                        <Picker
                            selectedValue={pickerValue}
                            onValueChange={(value) => handleChange(value)}
                        >
                            {countries.map(country => (
                                <Picker.Item
                                    key={country.value}
                                    label={country.label}
                                    value={country.value}
                                />
                            ))}
                        </Picker>
                    </View>
                </View>
            </Pressable>
        </Pressable> : null
    )
}

const styles = StyleSheet.create({
    modalbox: {
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        zIndex: 999,
        elevation: 999,
        backgroundColor: "rgba(0,0,0,0.2)",
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-end'
    },
    content: {
        width: '100%',
        borderRadius: size(4),
        backgroundColor: "#fff",
        fontSize: size(16),
        borderTopLeftRadius: size(10),
        borderTopRightRadius: size(10),
        overflow: 'hidden'
    },
    modalheaderbox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: size(20),
    },
    modalheadertitle: {
        color: '#333',
        fontWeight: '500',
        fontSize: size(16)
    },
    modalheadercanceltitle: {
        color: '#999',
        fontWeight: '500',
        fontSize: size(16)
    },
    modalheadersuretitle: {
        color: '#333',
        fontWeight: '500',
        fontSize: size(16)
    }
})
export default PickerModal;